#<!-- #ifdef MP-WEIXIN -->
<template>
	<view class="one">
		<view class="nav">
			<!-- 店铺信息板块 -->
			<view class="section-container">
				<view class="title">服务评价</view>
				<view class="shop-info">
					<image class="shop-image" src="/static/tx.jpg" mode="aspectFill"></image>
					<view class="shop-right">
						<text class="shop-name">车百事汽车生活馆</text>
						<view class="rating-section">
							<uni-rate 
								:value="rating" 
								:size="24"
								:allow-half="true"
								active-color="#FFB800"
								:margin="4"
								@change="handleRating"
								@touchmove.stop.prevent="handleTouchMove"
							/>
						</view>
					</view>
				</view>
			</view>

			<!-- 评价内容板块 -->
			<view class="section-container">
				<view class="titleone">评语(0-299字)</view>
				<view class="comment-section">
		
					<textarea 
						class="comment-input"
						v-model="comment"
						placeholder="请留下您宝贵的意见和建议......"
						placeholder-style="color: #999999;"
						:maxlength="299"
					></textarea>
					<view class="word-count">{{comment.length}}/299字</view>
				</view>
			</view>

			<!-- 照片上传板块 -->
			<view class="section-container">
				<view class="photo-section">
					<text class="titleone">照片(选填)</text>
					<view class="photo-list">
						<view class="photo-item" v-for="(photo, index) in photos" :key="index">
							<image :src="photo" mode="aspectFill"></image>
							<view class="delete-icon" @click="deletePhoto(index)">×</view>
						</view>
						<view class="photo-upload" @click="choosePhoto" v-if="photos.length < 3">
							<text class="plus-icon">+</text>
							<text class="upload-text">上传照片</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rating: 0,
				comment: '',
				photos: [],
				starWidth: 24,
				starMargin: 4
			}
		},
		methods: {
			handleRating(value) {
				this.rating = value;
			},
			handleTouchMove(e) {
				const touch = e.touches[0];
				const rateComponent = e.target;
				const rect = rateComponent.getBoundingClientRect();
				
				const offsetX = touch.clientX - rect.left;
				
				const totalStarWidth = this.starWidth + this.starMargin;
				let value = offsetX / totalStarWidth;
				
				value = Math.max(0, Math.min(5, value));
				
				if (value !== this.rating) {
					this.rating = Math.round(value * 2) / 2;
				}
			},
			choosePhoto() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.photos.push(res.tempFilePaths[0]);
					}
				});
			},
			deletePhoto(index) {
				this.photos.splice(index, 1);
			}
		}
	}
</script>

<style>
page {
	background: #F7F7F7;
}

.one {
	padding-top: 20rpx;
	height: 200rpx;
	background-color: #2D80F9;
}

.nav {
	width: 680rpx;
	min-height: calc(100vh - 400rpx);  /* 修改最小高度，留出底部空间 */
	margin: 0 auto;
	padding: 20rpx;
	background-color: transparent;
	position: relative;  /* 添加相对定位 */
	padding-bottom: 120rpx;  /* 为按钮留出空间 */
}

.section-container {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.shop-info {
	display: flex;
	align-items: flex-start;
	margin-bottom: 30rpx;
}

.shop-image {
	margin-top: 25rpx;
	width: 200rpx;
	height: 140rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.shop-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: 25rpx;
	gap: 15rpx;  /* 名称和评星之间的间距 */
}

.shop-name {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.rating-section {
	display: flex;
	justify-content: flex-start;  /* 改为左对齐 */
	touch-action: none;
}

.comment-section {
	position: relative;
	padding: 20rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin-left: -10rpx;
}

.comment-input {
	width: 100%;
	height: 300rpx;
	padding: 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	color: #333;
	border-radius: 20rpx;  /* 增加圆角 */
	background-color: #FFFFFF;  /* 改为白色背景 */
	border: 2rpx solid #EEEEEE;  /* 添加边框 */
}

.word-count {
	position: absolute;
	right: 40rpx;
	bottom: 40rpx;
	font-size: 24rpx;
	color: #999;
}

.photo-section {
	padding: 0;
}

.photo-title {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
	display: block;
}

.photo-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-top: 20rpx;
}

.photo-item {
	width: 180rpx;
	height: 180rpx;
	position: relative;
}

.photo-item image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

.delete-icon {
	position: absolute;
	top: -16rpx;
	right: -16rpx;
	width: 32rpx;
	height: 32rpx;
	line-height: 28rpx;  /* 微调以使 × 垂直居中 */
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	color: #FFFFFF;
	border-radius: 50%;
	font-size: 28rpx;
	z-index: 1;
}

.photo-upload {
	width: 180rpx;
	height: 180rpx;
	background-color: #FFFFFF;  /* 改为白色背景 */
	border: 2rpx solid #EEEEEE;  /* 添加边框 */
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
}

.plus-icon {
	font-size: 60rpx;
	color: #999;
	line-height: 1;
	font-weight: 300;
}

.upload-text {
	font-size: 24rpx;
	color: #999;
}

.submit-btn {
	width: 520rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	background-color: #2D80F9;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 40rpx;
	position: absolute;  /* 使用绝对定位 */
	left: 50%;
	bottom: -40rpx;  /* 距离底部的距离 */
	transform: translateX(-50%);  /* 水平居中 */
}
/* #ifdef MP-WEIXIN */
.submit-btn {
	width: 520rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	background-color: #2D80F9;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 40rpx;
	position: absolute;  /* 使用绝对定位 */
	left: 50%;
	bottom: -70rpx;  /* 距离底部的距离 */
	transform: translateX(-50%);  /* 水平居中 */
}
/* #endif */
.title {
	font-size: 36rpx;
	color: #000000;

	font-weight: 600;
	padding: 0 10rpx;
	padding-bottom: 20rpx;
	border-bottom: 8rpx solid #F6F6F6;
}

.title.no-border {
	border-bottom: none;
	padding-bottom: 10rpx;
}
.titleone{
	font-size: 36rpx;
	color: #000000;
	font-weight: 600;
	padding: 0 10rpx;

	padding-bottom: 10rpx;
	}
</style>


<!-- #endif -->